<template>
  <div id="feedback">
    <div @click="goBack" class="back">
      <el-tooltip class="item" effect="dark" content="返回上一级" placement="right">
        <img src="../../assets/back.png" alt="">
      </el-tooltip>      
    </div>
    <div class="left">
      <div class="search-box">
        <el-autocomplete
          class="input"
          :placeholder="question_perm == 0 ? '请输入您的问题' : '请输入待解决的问题'"
          suffix-icon="el-icon-search"
          v-model="input"
          :fetch-suggestions="querySearch"
          :trigger-on-focus="false"
          :maxlength="200"
          :show-word-limit="true"
          @select="selected"          
          clearable>
        </el-autocomplete>
        <el-button v-if="question_perm == 0" @click="ask" class="searchButton" type="danger" round>我要提问</el-button>
      </div>

      <div class="container">
        <div class="questionNum">共有{{ question }}个问题,已解决{{ solved }}个问题</div>
        <div class="tab-box">
          <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="最新" name="first">
              <div v-if="list.length" class="content">
                <div class="item" :key="index" v-for="(item, index) in list.slice((current-1)*size, current*size)">
                  <div class="avtar">
                    <el-image  
                      class="image"  
                      :src="avtarDefault"
                      fit="cover"></el-image>
                    <div class="user">{{ item.questioner }}</div>
                  </div>
                  <div class="item-container">
                    <div @click="toDetail(item)" class="item-title"><el-tag type="danger" size="mini" style="margin-right: 5px">问题</el-tag>{{ item.question }}</div>
                    <div class="item-content">
                      <div class="answer border">
                        <p v-if="item.answer_content.length"><el-tag type="success" size="mini" style="margin-right: 5px">回答</el-tag>{{ item.answer_content[0].content }}</p>
                        <p v-else style="color: #ff4949;">暂无答复,请耐心等待答复!</p>
                      </div>
                    </div>

                    <div class="answerTime">
                      <span style="margin-right: 8px;">浏览{{ item.reader_count }}次</span>
                      <span>{{ item.create_time }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else class="noData">
                <img src="../../assets/no.png" class="noData-image">
                <p class="text">暂未发布任何的提问</p>
              </div>
              <el-pagination
                v-show="list.length && total > 10"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                style="margin-top:15px;text-align: center;"
                small
                layout="prev, pager, next"
                :total="total">
              </el-pagination>
            </el-tab-pane>
            <el-tab-pane v-if="question_perm == 0" label="我的提问" name="second">
              <div v-if="list.length" class="content">
                <div class="item" :key="index" v-for="(item, index) in list.slice((current-1)*size, current*size)">
                  <div class="avtar">
                    <el-image  
                      class="image"  
                      :src="avtarDefault"
                      fit="cover"></el-image>
                    <div class="user">{{ item.questioner }}</div>
                  </div>
                  <div class="item-container">
                    <div @click="toDetail(item)" class="item-title"><el-tag type="danger" size="mini" style="margin-right: 5px">问题</el-tag>{{ item.question }}</div>
                    <div class="item-content">
                      <div class="answer border">
                        <p v-if="item.answer_content.length"><el-tag type="success" size="mini" style="margin-right: 5px">回答</el-tag>{{ item.answer_content[0].content }}</p>
                        <p v-else style="color: #ff4949;">暂无答复,请耐心等待答复!</p>
                      </div>
                    </div>

                    <div class="answerTime">
                      <span style="margin-right: 8px;">浏览{{ item.reader_count }}次</span>
                      <span>{{ item.create_time }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else class="noData">
                <img src="../../assets/no.png" class="noData-image">
                <p class="text">你还没有发布任何的提问</p>
              </div>
              <el-pagination
                v-show="list.length && total > 10"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                style="margin-top:15px;text-align: center;"
                small
                layout="prev, pager, next"
                :total="total">
              </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="待解决" name="third">
              <div v-if="list.length" class="content">
                <div class="item" :key="index" v-for="(item, index) in list.slice((current-1)*size, current*size)">
                  <div style="top: 18px;" class="avtar">
                    <el-image  
                      class="image"  
                      :src="avtarDefault"
                      fit="cover"></el-image>
                    <div class="user">{{ item.questioner }}</div>
                  </div>
                  <div class="item-container">
                    <div style="margin-bottom: 0;" @click="toDetail(item)" class="item-title"><el-tag type="danger" size="mini" style="margin-right: 5px">问题</el-tag>{{ item.question }}</div>
                    <!--<div class="item-content">
                      <div class="answer border">
                        <p v-if="item.answer_content">{{ item.answer_content }}</p>
                        <p v-else style="color: #ff4949;">暂无答复,请耐心等待答复!</p>
                      </div>
                    </div>-->

                    <div class="answerTime">
                      <span style="margin-right: 8px;">浏览{{ item.reader_count }}次</span>
                      <span>{{ item.create_time }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else class="noData">
                <img src="../../assets/no.png" class="noData-image">
                <p class="text">你还没有发布任何的提问</p>
              </div>
              <el-pagination
                v-show="list.length && total > 10"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                style="margin-top:15px;text-align: center;"
                small
                layout="prev, pager, next"
                :total="total">
              </el-pagination>
            </el-tab-pane>
          </el-tabs>
        </div>

      </div>

    </div>
    <div class="right">
      <div class="frequentlyAskedQuestion">
        <div class="title">常见问题</div>
        <div class="question-list">
          <ul class="question-item">          
            <li @click="toDetail(item)" v-for="(item, index) in alwaysList" :key="index" class="text">
              {{ item.question }}
            </li>
          </ul>
        </div>
      </div>
    </div>

    <el-drawer
      title="问题详情区"
      :visible.sync="drawer"
      :direction="direction"
      size="80%"
      >
      <detail v-if="drawer" :detail="detailItem" :isAnswer="isAnswer"></detail>
    </el-drawer>
  </div>
</template>

<script>
import Detail from './detail'
import { getHeader } from '@/app.config'

export default {
  name: 'feedback',
  components: {
    Detail
  },
  data() {
    return {
      input: '',
      question_perm: 0,
      avtarDefault: require('../../assets/user.png'),
      isAnswer: false,
      type: 'newest',
      drawer: false, // 控制详情的开关
      direction: 'rtl',
      activeName: 'first',
      timeout: null,
      total: 0,
      current: 1,
      detailItem: {}, // 详情传入的对象
      size: 10,
      list: [], // 最新列表
      alwaysList: [], // 常见问题
      searchList: [], // 搜索匹配关键字
      question: 0,
      solved: 0,
      timeout:  null
    }
  },
  created() {
    this.getAuthInfo()
  },
  mounted() {
    this.$nextTick(() => {
      this.getQuesttionList()
    })
  },
  methods: {
    handleClick(tab, event) {
      this.current = 1
      if(tab.name == 'first') {
        this.type = 'newest'
      } else if(tab.name == 'second') {
        this.type = 'self'
      } else {
        this.type = 'pending'
      }
      this.getQuesttionList()
    },
    getAuthInfo() {
      this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/account/user_permission`, {headers: getHeader()})
      .then(res => {
        if(res.status === 200) {
          if(res.data.code === 200) {
            this.question_perm = res.data.question_perm
          }
        }
      })
    },
    handleCurrentChange(val) {
      this.current = val
    },
    handleSizeChange(val) {
      this.size = val
    },
    goBack() {
      this.$router.go(-1)
    },
    toDetail(item) {
      this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/account/user/question_details?question_id=${item.question_id}`, {headers: getHeader()})
      .then(res => {
        if(res.status === 200) {
          if(res.data.code === 200) {
            this.detailItem = res.data.details
            this.isAnswer = res.data.is_answer
            this.drawer = true
          }
        }
      }).catch(error => {
        console.log(error)
      })
    },
    selected(item) {
      this.toDetail(item)
    },
    querySearch(queryString, cb) {      
      let results = queryString ? this.searchList.filter(this.createStateFilter(queryString)) : this.searchList

      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results);
      }, 300 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    getQuesttionList() {
      this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/account/user/question?type=${this.type}`, {headers: getHeader()})
      .then(res => {
        if(res.status === 200) {
          if(res.data.code === 200) {
            this.list = res.data.data
            if(this.type == 'newest') {
              this.question = res.data.total_count
              this.solved = res.data.replied_count
              this.alwaysList = res.data.FAQ
            }            
            if(this.list) {
              this.total = this.list.length
            }
          }
        }
      }).catch(error => {
        console.log(error)
      })
    },
    ask() {
      let obj = {question: this.input}
      if(!this.input) {
        this.$message.error('请输入您的问题后在提问!')
        return
      }
      this.$axios.post(`${process.env.VUE_APP_KANBAN_HOST}/api/account/user/question`, obj, {headers: getHeader()})
      .then(res => {
        if(res.status === 200) {
          if(res.data.code === 200) {
            this.$message.success('提问成功!')
            this.input = ''
            this.getQuesttionList()
          } else {
            if(res.data.msg) {
              this.$message.error(res.data.msg)
            }
          }
        }
      }).catch(error => {
        console.log(error)
      })
    },
    loadAll() {
      let input = this.input
      if(input == '') {
        return 
      }
      this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/account/recommend/${input}`, {headers: getHeader()})
      .then(res => {
        if(res.status === 200) {
          if(res.data.code === 200) {
            res.data.results.length ? this.searchList = res.data.results : this.searchList = [{value: '未搜索到结果!'}]
          }
        }
      }).catch(error => {
        console.log(error)
      })
    }
  },
  watch: {
    input() {
      this.loadAll()
    },
    drawer(newVal) {
      if(newVal == false) {
        this.getQuesttionList()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover{
    color: #ff4949;   
  }
  /deep/ .el-tabs__active-bar{
    background-color: #ff4949;
  }
  /deep/ .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
    color: #ff4949;
  }
  /deep/ .el-tabs__item{
    font-size: 15px; 
    font-weight: 700;   
  }
  /deep/ .el-tabs__content{
    max-height: 455px;
    flex-grow: 1;
    overflow-y: scroll;
  }
  /deep/ .el-input__inner:focus {    
    border-color: #ff4949;
  }
  #feedback{
    background: #f3f5f7;
    padding: 30px;
    padding-top: 70px;
    display: flex;
    position: relative;
    .back{
      position: absolute;
      left: 10px;
      top: 20px;
      width: 20px;
      height: 20px;
      cursor: pointer;
      img{
        width: 100%;
      }
    }
    .left{
      flex: 1;
      flex-wrap: nowrap;
      .search-box{
        display: flex;
        margin-bottom: 15px;
        .input{
          flex: 1;
          margin-right: 20px;
        }
        .searchButton{
          width: 100px;
        }
      } 
      .container{       
        // background: #fff;
        .tab-box{
          font-size: 16px;
          color: #545c63;
          font-weight: 700;
          .noData{
            margin-top: 68px;
            text-align: center;
            font-size: 16px;
            color: #9199a1;            
            .noData-image{
              width: 10%;
            }
            .text{
              line-height: 24px;
            }
          }
          .item{
            display: flex;
            // margin-left: 64px;
            margin-top: 15px;
            box-sizing: border-box;
            padding: 25px 0 5px 0;
            position: relative;
            border-bottom: 1px solid #1a1C1F21;
            .avtar{
              // position: absolute;
              // left: -64px;
              // top: 28px;
              width: 80px;
              height: 80px;
              text-align: center;
              margin-right: 10px;
              border-radius: 50%;
              .image{
                width: 48px;
                height: 48px;
                vertical-align: middle;
                border-radius: 50%;
              }
              .user{
                font-size: 13px;
                text-align: center;
                margin-top: 4px;
              }
            }
            .item-container{
              flex: 1;
              .item-title{
                cursor: pointer;
                font-size: 15px;
                font-weight: 700;
                color: #07111b;
                line-height: 24px;
                margin-bottom: 15px;
                text-overflow: ellipsis;
                word-break: break-all;
                word-wrap: break-word;
                overflow: hidden;
                text-overflow: -o-ellipsis-lastline;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
              }
              .item-title:hover{
                color: #ff4949;
              }
              .item-content{
                .answer{
                  width: 100%;
                  box-sizing: border-box;
                  p{
                    font-size: 12px;
                    color: #4d555d;
                    line-height: 24px;
                    text-overflow: ellipsis;
                    word-break: break-all;
                    word-wrap: break-word;
                    overflow: hidden;
                    text-overflow: -o-ellipsis-lastline;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                  }
                }
                .border{
                  border-left: 2px solid #d9dde1;
                  padding-left: 12px;
                }
              }
              .answerTime{
                text-align: right;
                font-size: 12px;
                color: #93999f;
                line-height: 24px;
              }
            }
          }
        }
        .questionNum{
          margin: auto; 
          padding: 10px;         
          font-size: 13px;
          color: #93999f;
          text-align: right;
        }
      } 
    }
    .right{
      width: 25%;
      font-size: 14px;
      color: rgb(84, 92, 99);
      .frequentlyAskedQuestion{
        padding: 2px 10px 7.5px 20px;
        .title{
          font-size: 16px;
          color: #07111b;
          margin-bottom: 16px;
        }
        .question-list{                  
          .text{ 
            cursor: pointer;          
            list-style: disc;
            font-size: 15px;
            padding: 12px 0;
            color: #545c63;
            line-height: 22px;
            border-bottom: 1px solid #d7d9db;
            word-break: break-all;
            word-wrap: break-word;
          }
          .text:hover{
            color: #ff4949;
            text-decoration: underline;
          }
        }
      }
    }
  }
</style>